<template>
  <div
    style="display: flex;flex-direction: column;height: 100%;padding-left: 10px;padding-right: 10px;">
    <dv-border-box-2 :color="['#025d6d']" style="overflow-y: hidden;height: 560px;">
      <el-table :data="tableData" style="width: 100%;height: 100%;overflow-y: auto;padding: 5px;"
        :header-row-style="{fontSize:'17px',color:'white'}"
        :row-style="{fontSize:'15px',color:'white'}" :span-method="objectSpanMethod" border>
        <el-table-column prop="leaderName" label="领导/月份" align="center">
        </el-table-column>
        <el-table-column prop="score1" label="Jan" align="center">
          <template slot-scope="scope">
            <CheckMark :state="scope.row.score1" />
          </template>
        </el-table-column>
        <el-table-column prop="score2" label="Feb" align="center">
          <template slot-scope="scope">
            <CheckMark :state="scope.row.score2" />
          </template>
        </el-table-column>
        <el-table-column prop="score3" label="Mar" align="center">
          <template slot-scope="scope">
            <CheckMark :state="scope.row.score3" />
          </template>
        </el-table-column>
        <el-table-column prop="score4" label="Apr" align="center">
          <template slot-scope="scope">
            <CheckMark :state="scope.row.score4" />
          </template>
        </el-table-column>
        <el-table-column prop="score5" label="May" align="center">
          <template slot-scope="scope">
            <CheckMark :state="scope.row.score5" />
          </template>
        </el-table-column>
        <el-table-column prop="score6" label="Jun" align="center">
          <template slot-scope="scope">
            <CheckMark :state="scope.row.score6" />
          </template>
        </el-table-column>
        <el-table-column prop="score7" label="Jul" align="center">
          <template slot-scope="scope">
            <CheckMark :state="scope.row.score7" />
          </template>
        </el-table-column>
        <el-table-column prop="score8" label="Aug" align="center">
          <template slot-scope="scope">
            <CheckMark :state="scope.row.score8" />
          </template>
        </el-table-column>
        <el-table-column prop="score9" label="Sep" align="center">
          <template slot-scope="scope">
            <CheckMark :state="scope.row.score9" />
          </template>
        </el-table-column>
        <el-table-column prop="score10" label="Oct" align="center">
          <template slot-scope="scope">
            <CheckMark :state="scope.row.score10" />
          </template>
        </el-table-column>
        <el-table-column prop="score11" label="Nov" align="center">
          <template slot-scope="scope">
            <CheckMark :state="scope.row.score11" />
          </template>
        </el-table-column>
        <el-table-column prop="score12" label="Dec" align="center">
          <template slot-scope="scope">
            <CheckMark :state="scope.row.score12" />
          </template>
        </el-table-column>
      </el-table>
    </dv-border-box-2>
    <el-row :gutter="10" style="flex: 1;padding-top: 10px;">

      <el-col :span="24" style="height:100%;overflow-y: hidden;">
        <dv-border-box-8 :color="['#025d6d']" style="flex: 1;">
          <div style="height: 100%;position: relative;">
            <div style="height:100%;" ref="echarts2"> </div>
          </div>
        </dv-border-box-8>

      </el-col>

    </el-row>
  </div>

</template>
<script>
// import Charts from '@jiaminghi/charts';
import { tableData } from './data';
import barOption1 from './charts/bar2';
import CheckMark from '@/components/checkMark';
import { queryLeadCheckList } from '@/service/leadCheck';
export default {
  components: { CheckMark },
  data() {
    return {
      loading: true,
      value: '1',
      tableData: [],

      option1: {},
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    countTimes(item, countItem) {
      let scoreArray = [
        item.score1,
        item.score2,
        item.score3,
        item.score4,
        item.score5,
        item.score6,
        item.score7,
        item.score8,
        item.score9,
        item.score10,
        item.score11,
        item.score12,
      ];
      let arr1 = scoreArray.sort();
      return arr1.lastIndexOf(countItem) - arr1.indexOf(countItem) + 1;
    },

    loadCharts() {
      const dataGroupBy = _.groupBy(this.tableData, (user) => user.leaderName);
      const leaders = [];
      const lackTimeArray = [];
      const planTimeArray = [];
      const actTimeArray = [];
      console.log('data', dataGroupBy);

      for (const leaderName in dataGroupBy) {
        leaders.push(leaderName);
        const dataArray = dataGroupBy[leaderName];
        const planTimes = this.countTimes(
          dataArray.filter((item) => item.checkType == '计划')[0],
          '○'
        );
        const actTimes = this.countTimes(
          dataArray.filter((item) => item.checkType == '结果')[0],
          '√'
        );

        const lackTimes = this.countTimes(
          dataArray.filter((item) => item.checkType == '结果')[0],
          '×'
        );

        lackTimeArray.push(lackTimes);
        planTimeArray.push(planTimes);
        actTimeArray.push(actTimes);
      }
      console.log('leaders', leaders);
      const option1 = barOption1;
      option1.xAxis.data = leaders;

      option1.series[0].data = lackTimeArray;
      option1.series[1].data = planTimeArray;
      option1.series[2].data = actTimeArray;

      const myChart1 = this.$echarts.init(this.$refs.echarts2);
      myChart1.setOption(option1);

      window.onresize = function () {
        //自适应大小
        myChart1.resize();
      };
    },
    clickItem(compny_name) {
      console.log('compny_name', compny_name);
    },
    async loadTable() {
      const res = await queryLeadCheckList({});
      if (res.dataList) {
        this.tableData = res.dataList;
        setTimeout(() => {
          this.loadCharts();
        }, 300);
      }
    },
  },

  mounted() {
    const vm = this;

    // this.$nextTick().then(
    //   function () {
    //     this.tableHeight = document.getElementById('tableWrapper').clientHeight;
    //     console.log('this.tableHeight', this.tableHeight);
    //   }.bind(this)
    // );
    this.loadTable();
  },
};
</script>
<style scoped>
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  /* border-bottom: 0; */
}

::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
  background-color: transparent !important;
}
::v-deep.el-table td.el-table__cell div.cell {
  background-color: transparent !important;
}
::v-deep .el-table {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent !important;
}

/* 去除底部白线 */
.el-table::before {
  background-color: transparent;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

::v-deep .el-table .el-table__cell {
  padding: 4px 0px;
}

.menu_text {
  color: #01ccec;
  font-size: 15px;
}

.border-box-content {
  padding: 10px;
  box-sizing: border-box;
}

.menu_row {
}

/deep/ .active_dot-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  margin-right: 3px;
}
/deep/ .active_dot_green-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: green;
}

/deep/ .active_dot_red-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: red;
}

.menu_col {
  height: 60px;
  margin-bottom: 15px;
}

/deep/ .point-class {
  cursor: pointer;
}
</style>